﻿Vue.component('pagination', {
    template: '<ul v-if="pageNumberList.length==0" class="pagination" style="display:none"></ul>' +
        '<template v-else>' +
        '<span class="total-count">共 {{pageTotal}} 页，总共 {{dataTotal}} 条</span>' +
        '<ul class="pagination">' +
        '<li :class="[\'previous\', pageNumber === 1 ? \'disabled\' : \'\']" @click="prevPage()">' +
        '<i></i>' +
        '</li>' +
        '<li  v-for="number in pageNumberList" track-by="$index" :class="{current: pageNumber === number, ellipsis: number === \'...\'}" @click="turnPage(number)" v-text="number"></li>' +
        '<li :class="[\'previous\', pageNumber === pageTotal ? \'disabled\' : \'\']" @click="nextPage()">' +
        '<i></i>' +
        '</li>' +
        '</ul>' +
        '<div class="turn-operater">' +
        '<span>' +
        '跳转到' +
        '<input class="go-number" type="text" v-model="goNumber" v-on:blur="correct($event)"/>' +
        '</span>' +
        '<span class="go-button" v-on:click="turnPage(goNumber)">GO</span>' +
        '</div>' +
        '</template>',
    props: {
        dataTotal: {
            type: Number,
            default: 0,
        },
        pageNumber: {
            twoWay: true,
            type: Number,
            default: 1
        },
        pageSize: {

            type: Number,
            default: 10
        },
        dataNumber: {
            twoWay: true,
            type: Number,
            default: 0
        },
        ajaxObj: {
            type: Object,
            default: null
        }
    },
    data: function() {
        return {
            goNumber: ''
        }
    },
    ready: function() {
        var ajaxObj = $.extend({}, this.ajaxObj);
        if (typeof ajaxObj.startWithAjax === 'boolean' && ajaxObj.startWithAjax && ajaxObj.url) {
            this.ajaxHandler(ajaxObj, this.pageNumber);
        }
    },
    computed: {
        pageTotal: function() {
            return Math.ceil(this.dataTotal / this.pageSize);
        },
        dataNumber: function() {
            return this.pageSize * (this.pageNumber - 1);
        },
        pageNumberList: function() {
            var total = this.pageTotal,
                current = this.pageNumber,
                i = 1,
                end = total,
                pageNumberList = [];
            if (total === 0) {
                return pageNumberList;
            }
            if (total > 7) {
                if (current <= 4) {
                    end = 6;
                    for (; i <= end; i++) {
                        pageNumberList.push(i);
                    }
                    pageNumberList.push('...');
                    pageNumberList.push(total);
                } else if (end - current < 4) {
                    pageNumberList.push(1);
                    pageNumberList.push('...');
                    i = end - 5;
                    for (; i <= end; i++) {
                        pageNumberList.push(i);
                    }
                } else {
                    pageNumberList.push(1);
                    pageNumberList.push('...');
                    i = current - 2;
                    end = current + 2;
                    for (; i <= end; i++) {
                        pageNumberList.push(i);
                    }
                    pageNumberList.push('...');
                    pageNumberList.push(total);
                }
            } else {
                for (; i <= end; i++) {
                    pageNumberList.push(i);
                }
            }
            return pageNumberList;
        }
    },
    methods: {
        //校验数字
        correct: function(e) {
            if (e.target.value === '') {
                return;
            }
            // 如果value不能解析成数字，则设置为空
            if (isNaN(parseFloat(e.target.value))) {
                this.goNumber = '';
                return;
            }
            // 最小输入1
            if (this.goNumber < 1) {
                this.goNumber = 1;
                return;
            }
            //最大为 pageTotal
            if (this.goNumber > this.pageTotal) {
                this.goNumber = this.pageTotal;
            }
        },
        prevPage: function() {
            if (this.pageNumber === 1) {
                return;
            }
            this.turnPage(this.pageNumber - 1);
        },
        nextPage: function() {
            if (this.pageNumber === this.pageTotal || this.pageTotal === 0 || this.dataTotal === 0) {
                return;
            }
            this.turnPage(this.pageNumber + 1);
        },
        turnPage: function(num) {
            //跳转传入的是字符串数字
            var num = parseInt(num);
            if (num) {
                if (num === this.pageNumber || num === '...') return;
                this.pageNumber = num;
                var ajaxObj = $.extend({}, this.ajaxObj);
                if (ajaxObj.url) {
                    this.ajaxHandler(ajaxObj, num);
                }
            }
        },
        ajaxHandler: function(ajaxObj, num) {
            if (typeof ajaxObj.url === 'function') {
                ajaxObj.url = ajaxObj.url(num);
            } else if (typeof ajaxObj.url === 'string') {
                if (ajaxObj.url.indexOf('{pagenum}') > -1) {
                    ajaxObj.url = ajaxObj.url.replace('{pagenum}', num);
                }
            } else {
                throw new Error('url is illegal'); // url 不合法url应为字符串或返回字符串的函数)
            }

            if (typeof ajaxObj.data === 'function') {
                ajaxObj.data = ajaxObj.data(num);
            }

            $.ajax(ajaxObj);
        }
    }
});